<template>
    <div style="border: 1px solid #ccc">
        <div>
            <button @click="handleInserActivityNode()">插入H5活动链接</button>
            <button @click="handleInserActivityNode2()">插入小程序活动链接</button>
            <button @click="handleInsertActivityHtml()">插入自定义标签内容</button>

        </div>
        <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
            mode="simple" @onCreated="handleCreated" @onChange="handleChange" />
    </div>
</template>

<script lang="ts" setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { IDomEditor, IEditorConfig, IToolbarConfig } from "@wangeditor/core";
import "./ActivityElement/index"

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
// 内容 HTML
const valueHtml = ref("<p>hello</p>");

const editorConfig: Partial<IEditorConfig> = { placeholder: "请输入内容..." };

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
});

const handleCreated = (editor: IDomEditor) => {
    editorRef.value = editor; // 记录 editor 实例，重要！
};

const handleChange = (editor: IDomEditor) => {
    console.log(editor.children)
    console.log(editor.getHtml())
}

const handleInserActivityNode = () => {
    const editor = editorRef.value;
    editor.insertNode({
        type: 'activity',
        name: "饿了么大额红包H5",
        id: 3,
        href: "https://baidu.com",
        children: [
            {
                text: ""
            }
        ]
    })
}

const handleInserActivityNode2 = () => {
    const editor = editorRef.value;
    editor.insertNode({
        type: 'activity',
        id: 4,
        name: "美团领取",
        miniprogramAppid: "1234656",
        miniprogramPath: "/pages/admin/index",
        children: [
            {
                text: ""
            }
        ]
    })
}

const handleInsertActivityHtml = () => {
    editorRef.value.setHtml(`<p><a data-w-e-type="activity" data-w-e-is-void data-w-e-is-inline actId="3" href="https://baidu.com" >饿了么大额红包H5</a><a data-w-e-type="activity" data-w-e-is-void data-w-e-is-inline actId="4" data-miniprogram-appid="1234656" data-miniprogram-path="/pages/admin/index">美团领取</a>hello<a data-w-e-type="activity" data-w-e-is-void data-w-e-is-inline actId="4" data-miniprogram-appid="1234656" data-miniprogram-path="/pages/admin/index">美团领取</a><a data-w-e-type="activity" data-w-e-is-void data-w-e-is-inline actId="4" data-miniprogram-appid="1234656" data-miniprogram-path="/pages/admin/index">美团领取</a><a data-w-e-type="activity" data-w-e-is-void data-w-e-is-inline actId="4" data-miniprogram-appid="1234656" data-miniprogram-path="/pages/admin/index">美团领取</a></p>`)
}
</script>
